<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 100px;
      height: 100px;
      background: lightcoral;
      position: absolute;
      left: 0px;
      top: 0px;
      transition: 1s;
    }
  </style>
</head>

<body>
  <div class="box"></div>
  <script type="module">
    import MyEvent from './myevent.js';
    
    let myevent = new MyEvent();

    let box = document.querySelector('.box')

    // myevent是实例对象  调用addEvent方法()
    // 实现的思路:  每调用一次方法 就传递过去一次 myevent事件名(这个事件名组成一次数组)
    
    myevent.addEvent("myevent1", ()=>{
      console.log("运动结果111");
      move(300,0)
    })
    myevent.addEvent("myevent2", ()=>{
      console.log("运动结束222")
      move(300,300)
    })
    myevent.addEvent("myevent3", ()=>{
      console.log("运动结束333")
      move(0,300)
    })
    myevent.addEvent("myevent4", ()=>{
      console.log("运动结束444")
      move(0,0)
    })
    // 执行第一次事件
    myevent.trigger('myevent1')
    let count = 0
    function move (numX = 0, numY = 0, cb) {
      setTimeout(() => {
        box.style.transform = `translate(${numX}px,${numY}px )`
        // 无限循环执行事件
        count === 4? count = 1 : count++
        myevent.trigger('myevent'+count)
      }, 1000)
    }

  </script>
</body>

</html>